<template>
  <el-menu
    :mode="menuCfg.mode" :unique-opened="true"
    :default-active="menuCfg.defaultActive"
    router
  >
    <template v-for="item in menus">
      <el-menu-item
        v-if="!item.children"
        :key="item.path"
        :index="item.path"
      >
        {{ item.title }}
      </el-menu-item>

      <el-submenu v-else :key="item.path" :index="item.path">
        <template #title>
          {{ item.title }}
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.path"
          :index="child.path"
        >
          {{ child.title }}
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRoute } from 'vue-router'

import { dataRouterMenu } from '@/router/modules/data'
export default defineComponent({
  name: 'Navber',
  setup() {
    /**
     * 获取菜单数据
     */
    function getMenus(list, parentPath){
      const newList = []
        list.forEach(d => {
          let obj = {
            path: parentPath ? parentPath + '/' + d.path : d.path,
            name: d.name,
            title: d.meta?.title || d.name,
            children: null,
          }
          if (d.children) {
            const children = getMenus(d.children, obj.path)
            if (children.length === 1) {
              obj = children[0]
            } else {
              obj.children = children
            }
          }
          newList.push(obj)
        })
      return newList
    }

    const menus = reactive(getMenus(dataRouterMenu, ''))

    // 菜单配置
    const menuCfg = reactive({
      // 模式 horizontal / vertical
      mode: 'vertical',
      // 当前激活菜单的 index
      defaultActive: '/data/movie'
    })

    const route = useRoute()
    menuCfg.defaultActive = route.path
    // console.log(route)
    // console.log(route.path)

    return {
      menus,
      menuCfg
    }
  },
})
</script>

<style lang="scss" scoped>
// .navbar {
//   width: 250px;
//   height: 100vh;
// }
</style>
